<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择事业部"
								filterable
								style="width: 150px"
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="人员">
							<cl-select
								v-model="search.create_user_id"
								placeholder="全部"
								filterable
								collapse-tags
							>
								<el-option
									v-for="item in userList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="模板名称">
							<el-input
								v-model="search.keyword"
								placeholder="请输入模板名称"
								clearable
								style="width: 200px"
								@change="refresh"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-button icon="el-icon-plus" size="small" type="primary" @click="goAd()">
							添加模板
						</el-button>
						<!-- <el-button icon="el-icon-plus" type="warning" @click="openForm()">
							添加模板(旧版，不推荐使用)
						</el-button> -->
					</div>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="table">
				<cl-empty slot="empty" />
				<template #column-bg_color="{ scope: { row } }">
					<div class="color-box" :style="{ 'background-color': row.bg_color }" />
					<span>{{ row.bg_color }}</span>
				</template>
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-start">
						<el-button type="primary" @click="goAd(true, row)">修改</el-button>
						<!-- <el-button type="warning" @click="openForm(true, row)">
							修改(旧)
						</el-button> -->
						<el-button @click="remove(row)"> 删除 </el-button>
					</div>
				</template>
			</cl-table>

			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<mould-form ref="form" @confirm="refresh" />
	</cl-crud>
</template>

<script>
import MouldForm from "./components/mould-form";
export default {
	name: "WideMouldList",
	components: {
		MouldForm
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ label: "ID", prop: "id", width: 50, fixed: true },
					{
						label: "事业部",
						prop: "biz_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 150,
						align: "left"
					},
					{
						label: "模板名称",
						prop: "name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "网页标题",
						prop: "title",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "网页背景色", prop: "bg_color", width: 110 },
					{ label: "是否开启评论", prop: "enable_mes_desc", width: 110 },
					{ label: "操作", prop: "opt", width: 150, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				bra_id: "",
				keyword: "",
				user_idcreate_user_id: ""
			},
			userList: [] //组员
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.getUserList();
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "templateList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		initData() {
			this.refresh();
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		changeBiz() {
			this.search.bra_id = ''
			this.getBrand();
			this.refresh();
		},
		//获取品牌
		async getBrand() {
			const { biz_id } = this.search;
			const data = await this.getBizRefBrand(biz_id);
			this.search.bra_id = data.length == 1 ? data[0]?.bra_id ?? "" : "";
		},
		// 打开表单
		goAd(editing = false, data = {}) {
			let query = {};
			if (editing) {
				query = { ...data, editing: 1 };
			}
			this.$router.push({ path: "/ad", query });
		},
		// 打开表单(旧)
		openForm(editing = false, data = {}) {
			this.$refs.form.open(editing, data);
		},
		// 删除
		remove({ id }) {
			this.confirm("是否执行此操作?")
				.then(async () => {
					await this.$service.ad.templateDel({ id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		async getUserList() {
			const { biz_id } = this.search;
			this.userList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				biz_id,
				post: 4,
				manage_user: 1
			});
			this.userList = data;
		},
	}
};
</script>

<style lang="scss" scoped>
.color-box {
	display: inline-block;
	overflow: hidden;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	margin-bottom: -2px;
	margin-right: 4px;
	border: solid 1px $border-main;
}
</style>
